<template>
  <el-card class="Setting">
    <div class="details">
      <div class="title">

        <div class="imglog"></div>
        <div class="message">
          <span>Lenovo Storage AI</span>
          <span>{{ $t('Setting.DeviceId') }}：{{ port.device_id }}</span>
        </div>
      </div>
      <div class="type"><span class="key">{{ $t('Setting.ConnectionMethod') }}</span><span class="value">{{isNetWork}}</span></div>
      <div class="type" v-if="isNetWork === 'Wi-Fi'"><span class="key">Wi-Fi</span><span class="value">{{ wifiName }}</span></div>
    </div>
    <el-dropdown-menu style="margin-top:8px;">
      <el-dropdown-item>
        <div class="dropdown-item" @click="dialogFormVisible('wifiList')"><span class="wifi icon"></span><span
            class="content">{{ $t('Setting.WiFiNetworkConfiguration') }}</span><span class="right icon"></span>
        </div>
      </el-dropdown-item>
      <el-dropdown-item>
        <div class="dropdown-item" @click="dialogFormVisible('password')"><span class="pwd icon"></span><span
            class="content">{{ $t('Setting.ChangeLoginPassword') }}</span><span class="right icon"></span>
        </div>
      </el-dropdown-item>
      <el-dropdown-item>
        <div class="dropdown-item" @click="outLogin"><span class="eixt icon"></span><span
            class="content">{{ $t('Setting.Logout') }}</span><span class="right icon"></span>
        </div>
      </el-dropdown-item>

    </el-dropdown-menu>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router"
import { usePortStore } from '@/stores/index'
import { storeToRefs } from "pinia";
import { defineEmits } from 'vue';
const emit = defineEmits(['dialogFormVisible']);
const isNetWork = ref('')
const wifiName = ref('')
const { port, setPort } = usePortStore()

const router = useRouter()
const outLogin = () => {
  setPort({})
  router.push('/DeviceBinding')
}

onMounted(async ()=>{
})

const dialogFormVisible = (type) => {
  emit('dialogFormVisible', { type });
}

</script>

<style lang="scss" scoped>
.Setting {
  width: 350px;
  height: 380px;

  .details {
    width: 100%;
    height: 150px;
    border-radius: 6px;
    background: #F4F5F9;
    padding: 16px;

    .title {
      display: flex;
      width: 100%;
      margin-bottom: 30px;

      .imglog {
        width: 40px;
        height: 40px;
        background: url("@/icons/storageTitle.svg") no-repeat center;
        background-size: 40px;
        margin-right: 10px;
      }

      .message {
        display: flex;
        flex-direction: column;

        span {
          &:nth-child(1) {
            color: #191919;
            font-size: 14px;
            font-weight: 600;
          }

          &:nth-child(2) {
            color: #666;
            font-size: 12px;
          }
        }
      }

    }

    .type {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 16px;

      .key {
        color: #191919;
        font-size: 14px;
      }

      .value {
        color: #666;
        font-size: 12px;
      }
    }
  }

  .dropdown-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    align-items: center;

    .icon {
      display: flex;
      width: 20px;
      height: 20px;
      background-size: 20px;

    }

    .wifi {
      background: url("@/icons/wifi.svg") no-repeat center;
    }

    .right {
      background: url("@/icons/右.svg") no-repeat center;
    }

    .eixt {
      background: url("@/icons/退出.svg") no-repeat center;

    }

    .pwd {
      background: url("@/icons/密码.svg") no-repeat center;

    }

    .content {
      margin-right: auto;
      margin-left: 10px;
    }
  }
}
</style>
